<template>
  <div>
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        :data="settlementList"
        class="ccui-form-child-table"
        border
        show-summary
        :summary-method="getSummaries"
        @select="listSelectTable"
        @select-all="listSelectTable"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          show-overflow-tooltip
          label="序号"
          type="index"
          align="center"
          width="55"
          fixed
        />

        <el-table-column
          show-overflow-tooltip
          prop="acceptCode"
          width="130"
          label="验收单编号"
          fixed
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="acceptName"
          width="200"
          label="验收单名称"
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="acceptTime"
          label="验收日期"
          width="100"
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="acceptor"
          label="验收人"
          width="100"
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="materialName"
          width="300"
          label="设备物资名称"
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="materialState"
          width="130"
          label="设备物资说明"
        >
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="measureUnit" label="单位">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="contractCode"
          width="130"
          label="合同编号"
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="orderCode"
          width="130"
          label="订单编号"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="orderCount"
          label="订单数量"
          width="130"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="acceptCount"
          label="验收数量"
          width="120"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="unitPriceWithTax"
          label="结算单价"
          width="130"
          align = "right"
          header-align= "left"
        >
        </el-table-column>
      </el-table>
    </div>
    <chooseMaterials
      ref="materialsFormVisible"
      @handleSelect="handleSelect"
      :chooseMaterialsBtn="chooseMaterialsBtn"
    />
  </div>
</template>

<script>
import chooseMaterials from "@/basa/components/public/chooseMaterials";
// import { formatNumber } from "@/basa/utils";
import BigNumber from "bignumber.js";
import jsList from "../js";
export default {
  name: "purchaseList",
  components: { chooseMaterials },
  props: {
    acceptanceList: {
      type: Array
    }
  },
  data() {
    return {
      jsList,
      listTableData: [],
      materialVisible: false,
      chooseMaterialsBtn: 0, // 点击选择物资按钮时为true
      settlementList:[]
    };
  },
  created() {
    console.log(this.acceptanceList)
  },
  mounted() {
        console.log(this.acceptanceList)
  },
  activited() {
        console.log(this.acceptanceList)
  },
  update() {},
  methods: {
    // 采购计划选择确认
    planConfirm(data) {
      console.log("采购计划选中行==>>", data);
    },
    // 采购方案选择确认
    programmeConfirm(data) {
      console.log("采购方案选中行==>>", data);
    },
    // 选择材料
    handleChooseMaterials() {
      // 打开新增物资清单页面
      this.$refs.materialsFormVisible.dialogFormVisible = true;
      this.chooseMaterialsBtn++;
    },
    // 采购清单选中数据
    listSelectTable(val, column, row) {
      this.listTableData = val;
    },
    handleSelect(row) {},
    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              if (column.label == "订单数量" || column.label == "验收数量") {
                let num = new BigNumber(Number(prev)).plus(Number(curr)).toNumber();
                return Number(num)
              }
            } else {
              return (prev = " ");
            }
          }, 0);
          if (column.label == "订单数量") {
            sums[index] = Number(sums[index]).toFixed(3);
          }
          if (column.label == "验收数量") {
            sums[index] = Number(sums[index]).toFixed(3);
          }
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
    // 金额四舍五入 8位小数
    calculateFilter(data) {
      if (data || data == 0) {
        if ((data + "").indexOf(".") != -1) {
          let newData = (data + "").substring(0, (data + "").indexOf(".") + 9);
          return newData;
        } else {
          return data;
        }
      } else {
        return "";
      }
    },
    // 金额四舍五入
    numberFilter(data) {
      if (data || data == 0) {
        if ((data + "").indexOf(".") != -1) {
          let newData = (data + "").substring(0, (data + "").indexOf(".") + 4);
          return newData;
        } else {
          return data;
        }
      } else {
        return "";
      }
    },
    tableRowClassName(data) {
      if (data.row.isOtherCost == 1) {
        return "hidden-row";
      }
      return "";
    }
    // listPursckinfoPage
  },
  filter: {},
  computed: {},
  watch: {
   acceptanceList(data){
    this.settlementList = []
      data.forEach(item =>{
        if(item.isServices == 0){
        this.settlementList.push(item)
      }
    })
   }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .ccui-multifunctional-table-wrapper {
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc;
  }
}
.ml {
  margin-left: 10px;
}
.operation-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}
/deep/ .hidden-row {
  display: none;
}
/deep/ .el-table__body-wrapper {
  z-index: 1;
}
</style>
